错误：https ://github.com/mixalistzikas/angular-ssr-i18n
Run `npm run build:all`. Navigate to `http://localhost:4201/`.
我正在尝试使用 i18n 进行服务器端渲染。我已经使用 angular <=5 完成了此操作，但现在使用 angular CLI 6，我遇到了麻烦。
我正在运行“npm run build:all”并且每次都完成没有任何错误......
浏览器文件.... 完成 服务器文件.... 完成 webpack ...... 完成
但是当我试图在“listening on http://localhost:4201 ”打开站点时，我总是会收到以下错误
Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
谢谢....如果您需要任何其他文件，请告诉我上传
包.json
{
"name": "frontend-admin",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:all": "node scripts/build.js && node scripts/build.js --server=true && webpack --mode production && node ./dist/server.js",
"build:web": "node scripts/build.js",
"build:server": "node scripts/build.js --server=true",
"build:webpack": "webpack --mode production",
"start:server": "node ./dist/server.js",
"build-i18n": "for lang in en el; do ng build --output-path=dist/$lang --aot --prod --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --i18n-locale $lang --base-href /$lang/; done"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.3",
"@angular/animations": "^6.0.7",
"@angular/common": "^6.0.7",
"@angular/compiler": "^6.0.7",
"@angular/core": "^6.0.7",
"@angular/forms": "^6.0.7",
"@angular/http": "^6.0.7",
"@angular/platform-browser": "^6.0.7",
"@angular/platform-browser-dynamic": "^6.0.7",
"@angular/platform-server": "^6.0.7",
"@angular/router": "^6.0.7",
"@ng-bootstrap/ng-bootstrap": "^2.2.0",
"@ng-bootstrap/schematics": "^2.0.0-alpha.1",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"@ngxs/devtools-plugin": "^3.1.3",
"@ngxs/logger-plugin": "^3.1.3",
"@ngxs/store": "^3.1.3",
"bootstrap": "^4.1.1",
"core-js": "^2.5.7",
"moment": "^2.22.2",
"ngx-dropzone-wrapper": "^6.1.0",
"ngx-moment": "^3.1.0",
"rxjs": "^6.2.0",
"ts-loader": "^4.4.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~6.0.8",
"@angular/compiler-cli": "^6.0.7",
"@angular/language-service": "^6.0.7",
"@types/googlemaps": "^3.30.11",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^10.1.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.2.0",
"protractor": "~5.3.2",
"ts-node": "^6.1.2",
"tslint": "^5.10.0",
"typescript": "~2.7.2",
"webpack-cli": "^3.0.8",
"webpack-node-externals": "^1.7.2"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"_components/*": [
"src/app/core/components/*"
],
"_directives/*": [
"src/app/core/directives/*"
],
"_services/*": [
"src/app/core/services/*"
],
"_pipes/*": [
"src/app/core/pipes/*"
],
"_layouts/*": [
"src/app/core/layouts/*"
],
"_shared/*": [
"src/app/core/shared/*"
],
"_layouts/*": [
"src/app/core/layouts/*"
],
"_validators/*": [
"src/app/core/validators/*"
],
"_guards/*": [
"src/app/core/guards/*"
]
}
}
}
src/tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"types": []
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
src/tsconfig.server.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
src/main.server.ts
export { AppServerModule } from './app/app.server.module';
角.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"frontend-admin": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/assets/css/variables.scss",
"src/assets/font/AvertaStd/stylesheet.css",
"src/assets/css/layout.scss",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "frontend-admin:build"
},
"configurations": {
"production": {
"browserTarget": "frontend-admin:build:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/app/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "frontend-admin:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"frontend-admin-server": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "dt",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/server",
"index": "src/index.html",
"main": "src/main.server.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.server.json",
"assets": [],
"styles": [],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "frontend-admin-server:build"
},
"configurations": {
"production": {
"browserTarget": "frontend-admin-server:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "frontend-admin-server:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.server.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.server.json",
"src/tsconfig.server.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"frontend-admin-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "frontend-admin:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "frontend-admin",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
}
脚本/build.js
const execSync = require('child_process').execSync;
const path = require('path');
const project = require(path.join(process.cwd(), 'project.json'));
const args = require('yargs').argv;
const locales = Object.keys(project.locales);
const baseCommand = args.server === 'true' ? project.server.command :
project.client.command;
const folder = args.server === 'true' ? project.server.output :
project.client.output;
function buildCommand(command, locale, output, needFile) {
command += ` --output-path dist/${output}/${locale.toLowerCase()} --deploy-url /${locale.toLowerCase()}/ --base-href /${locale.toLowerCase()}/ --i18n-locale=${locale}`;
if (needFile) {
command += ` --i18n- =file=src/i18n/messages.${locale.toLowerCase()}.xlf --i18n-format=xlf`;
}
console.log(command);
return command;
}
for (let i = 0; i < locales.length; i++) {
console.info(`Building for locale ${locales[i]}...`);
execSync(buildCommand(baseCommand, locales[i], folder,
project.locales[locales[i]]), { cwd: process.cwd(), stdio: [0, 1, 2] });
console.info();
}
process.exit(0);
webpack.config.js
const path = require('path');
const project = require(path.join(process.cwd(), 'project.json'));
var nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const locales = Object.keys(project.locales);
const config = {
entry: {
server: './server.ts'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {}
},
target: 'node',
externals: [nodeExternals({
whitelist: [
]
})],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.ts$/,
loader: 'ts-loader'
}]
},
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.BROWSER': JSON.stringify(true),
'window': JSON.stringify(true)
}),
// ...
]
};
for (let i = 0; i < locales.length; i++) {
config.resolve.alias[`main.server.${locales[i].toLowerCase()}`] = path.join(__dirname, 'dist', 'server', locales[i].toLowerCase(), 'main.js')
}
module.exports = config;
webpack.server.config.js
const path = require('path');
const project = require(path.join(process.cwd(), 'project.json'));
var nodeExternals = require('webpack-node-externals');
const locales = Object.keys(project.locales);
const config = {
entry: {
server: './server.ts'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {}
},
target: 'node',
externals: [nodeExternals()],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.ts$/,
loader: 'ts-loader'
}]
}
};
for (let i = 0; i < locales.length; i++) {
config.resolve.alias[`main.server.${locales[i].toLowerCase()}`] = path.join(__dirname, 'dist', 'server', locales[i].toLowerCase(), 'main.js')
}
module.exports = config;
项目.json
{
"locales": {
"en": true,
"el": true
},
"client": {
"command": "ng build frontend-admin --prod --build-optimizer",
"output": "browser"
},
"server": {
"command": "ng build frontend-admin-server --aot",
"output": "server"
}
}
src/app/app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],
providers: [
// Add universal-only providers here
],
bootstrap: [ AppComponent ],
})
export class AppServerModule {
constructor() {
//const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
console.log(`11111111111111111111111111111`);
}
}