Итак, у меня проблема, я получаю ошибку: Ошибка типа: Object (...) не является функцией в новом ApplicationRef
Мой webpack.server.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
externals: [/(node_modules|main\..*\.js)/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard|Focus)Event\\]', flags: 'g' }, replaceWith: '[]', } },
{ test: /\.ts$/, loader: 'ts-loader' },
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'),
{}
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "jinni-angular"
},
"apps": [
{
"root": "src",
"outDir": "dist/browser",
"assets": [
"assets",
"images",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss",
"../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"platform": "server",
"root": "src",
"outDir": "dist/server",
"assets": [
"assets",
"images",
"favicon.ico"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {
}
}
}
Package.json
{
"name": "jinni-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:universal": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^5.0.0",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"@types/underscore": "^1.8.6",
"classlist.js": "^1.1.20150312",
"compression": "latest",
"cookie-parser": "latest",
"core-js": "^2.5.5",
"express": "latest",
"global": "^4.3.2",
"hammerjs": "^2.0.8",
"jquery": "latest",
"ng-custom-select": "^1.0.4",
"ng-select": "^1.0.0-rc.3",
"ng2-breadcrumbs": "^0.1.281",
"ng2-carouselamos": "^3.2.0",
"ng2-translate": "^5.0.0",
"ng4-click-outside": "^1.0.1",
"ng4-intl-phone": "^1.2.0",
"ngx-device-detector": "^1.2.2",
"ngx-dropdown": "0.0.22",
"ngx-owl-carousel": "^2.0.7",
"node": "^9.11.0",
"node-fetch": "^2.1.2",
"npm": "^5.8.0",
"regexp-replace-loader": "^1.0.1",
"rxjs": "^5.5.2",
"serve": "^6.5.3",
"ts-loader": "^3.5.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"underscore": "^1.8.3",
"webpack": "^3.5.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/compression": "0.0.36",
"@types/express": "^4.11.1",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.7.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"webpack-cli": "^2.1.3"
}
}
и наконец server.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
enableProdMode();
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
document: template,
url: options.req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
global['Event'] = null;
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
после использования служат: универсальные все хорошоно когда я перехожу к localhost: 4000, я получаю ошибку TypeError: Object (...) не является функцией в новом ApplicationRef
Любые идеи?
полная ошибка:
TypeError: Object(...) is not a function
at new ApplicationRef (/.../dist/server.js:5838:64)
at _createClass (/..../dist/server.js:10145:20)
at _createProviderInstance$1 (/..../dist/server.js:10115:26)
at initNgModule (/..../dist/server.js:10051:32)
at new NgModuleRef_ (/..../dist/server.js:10767:9)
at Object.createNgModuleRef (/..../dist/server.js:10756:12)
at NgModuleFactory_.create (/..../dist/server.js:13289:25)
at /..../dist/server.js:5589:43
at ZoneDelegate.invoke (/...../dist/server.js:147664:26)
at Object.onInvoke (/...../dist/server.js:4931:33)