目前我正在尝试使用Angular Universal构建一个项目。我正在使用Angular 4版本。如果我导入Material模块,该项目可以被构建,但是当通过ts-node进行服务时会出现错误 -
dist\ngfactory\node_modules\@angular\material\typings\index.ngfactory.ts:9
import * as import0 from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Module._extensions..js (module.js:580:10)
如果我尝试导入NgXBootstrap,那么就会出现以下错误 -
node_modules\ngx-bootstrap\dropdown\bs-dropdown.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
我正在遵循这个项目结构 - https://github.com/designcourse/angular-seo
我在这里粘贴代码 -
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
//Material Module
import {MaterialModule} from '@angular/material';
//Ngx Bootstrap
import {BsDropdownModule} from 'ngx-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { PostsComponent } from './posts/posts.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
PostsComponent
],
imports: [
BrowserModule.withServerTransition({appId: 'universal-app'}),
FormsModule,
HttpModule,
AppRoutingModule,
MaterialModule,
BsDropdownModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
ServerModule,
AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
server.ts
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = 4000;
enableProdMode();
const app = express();
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', 'src')
app.get('*.*', express.static(join(__dirname, '..', 'dist')));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`listening on http://localhost:${PORT}!`);
});
我想这对于Angular Universal中的所有第三方库来说都是一个问题。那么,我该如何正确地导入这些库呢?