1

我正在做这个演示项目。

它是根据本教程创建的。它基于Angular 2.0.0。

我想将项目升级到 Angular 2.4。

我所做的是这个——

新package.json-

{
  "author": "Abrar Jahin",
  "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/forms": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "^3.4.1",
    "@types/node": "^6.0.55",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "description": "Angular 2 with ASP.Net Core CRUD App",
  "devDependencies": {
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.11",
    "css": "^2.2.1",
    "css-loader": "^0.26.1",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.0.2",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^2.0.0",
    "zone.js": "^0.7.4"
  },
  "license": "MIT",
  "main": "wwwroot/index.html",
  "Name": "Angular2-CRUD",
  "repository": {
    "url": "https://github.com/abrarjahin/Dot.NetCore_Angular2_App"
  },
  "version": "0.0.1"
}

老package.json-

{
  "author": "Abrar Jahin",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/node": "^6.0.55",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "description": "Angular 2 with ASP.Net Core CRUD App",
  "devDependencies": {
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.11",
    "css": "^2.2.1",
    "css-loader": "^0.26.1",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.0.2",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^2.0.0",
    "zone.js": "^0.7.4"
  },
  "license": "MIT",
  "main": "wwwroot/index.html",
  "Name": "Angular2-CRUD",
  "repository": {
    "url": "https://github.com/abrarjahin/Dot.NetCore_Angular2_App"
  },
  "version": "0.0.1"
}

所以，变更日志是package.json-

在此处输入图像描述

这样做之后，我收到了这个错误-

Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: Cannot read property 'SelectorMatcher' of undefined
at Object.<anonymous> (D:\ProfileManagement\ProfileManagement\node_modules\angular2-platform-node\__private_imports__.js:21:54)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:\ProfileManagement\ProfileManagement\node_modules\angular2-platform-node\node-platform.js:15:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)

谁能帮我

回覆-

我已经关注了这篇文章（从 Angular 2.2.3 升级到 2.4.0），但它对我不起作用。

Rr重新

Folder PATH listing for volume Code
Volume serial number is 00000200 F64B:849E
D:.
|   boot-client.ts
|   boot-server.ts
|   tsconfig.json
|   
+---app
|   |   app.module.ts
|   |   
|   +---components
|   |   +---app
|   |   |       app.component.css
|   |   |       app.component.html
|   |   |       app.component.ts
|   |   |       
|   |   +---counter
|   |   |       counter.component.html
|   |   |       counter.component.ts
|   |   |       
|   |   +---fetchdata
|   |   |       fetchdata.component.html
|   |   |       fetchdata.component.ts
|   |   |       
|   |   +---home
|   |   |       home.component.html
|   |   |       home.component.ts
|   |   |       
|   |   +---navmenu
|   |   |       navmenu.component.css
|   |   |       navmenu.component.html
|   |   |       navmenu.component.ts
|   |   |       
|   |   +---profile-detail
|   |   |       profileDetail.component.html
|   |   |       profileDetail.component.ts
|   |   |       
|   |   \---profile-list
|   |           profileList.component.css
|   |           profileList.component.html
|   |           profileList.component.ts
|   |           
|   +---dataModel
|   |       Profile.ts
|   |       WeatherForecast.ts
|   |       
|   \---services
|           profile.service.ts
|           
\---dist
        main-server.js
        _placeholder.txt
4

3 回答 3

2 
/*
 * THIS IS TEMPORARY TO PATCH 2.1.1+ Core bugs
 */

/* tslint:disable */
let __compiler__ = require('@angular/compiler');
import { __platform_browser_private__ } from '@angular/platform-browser';
import { __core_private__ } from '@angular/core';
if (!__core_private__['ViewUtils']) {
    __core_private__['ViewUtils'] = __core_private__['view_utils'];
}



if (__compiler__ && __compiler__.SelectorMatcher && __compiler__.CssSelector) {
    (__compiler__).__compiler_private__ = {
        SelectorMatcher: __compiler__.SelectorMatcher,
        CssSelector: __compiler__.CssSelector
    }
}

将上述内容复制并粘贴到名为“__workaround.browser.ts”的新文件中。`

然后导入'./__workaround.browser'; 在您的 client.ts 或 main.ts 中。

于 2016-12-30T12:25:02.233 回答
1

我假设您将 Angular2 与 ASP.Net Core 和 webpack 一起使用，因为当我在 angular2 中使用它们并尝试升级时遇到了这个问题。

当我一起使用这两个东西时，我遇到了这个错误。

我有一个解决方法，asp-prerender-webpack-config从标签中删除属性并将 Webpack 配置为将转译文件输出到另一个同名文件。确保添加libraryTarget: 'commonjs2'到 webpack 配置文件以使其工作，因为它需要您以这种方式导出引导功能：module.exports. 默认情况下，webpack 不导出任何内容，您必须自己指定。下面是使其工作所需的代码片段，因为它对我有用：

clients.jsx

var React = require("react");
var ReactDOMServer = require("react-dom/server");

var Test = React.createClass({
    render: function(){
        return (<h1>Hello!</h1>);
    }
});

module.exports = function (params) {
    return new Promise((resolve, reject) => {
         resolve({
             html: ReactDOMServer.renderToString(<Test />)
        });
    });
}

webpack.config.js

/// <binding ProjectOpened='Watch - Development' />

var webpack = require('webpack');
var path = require('path');

var MODULES = path.resolve(__dirname, "wwwroot/modules");

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['node_modules']
    },
    entry: {
        clients: MODULES + "/clients.jsx"
    },
    output: {
        path: MODULES,
        filename: "[name].js",
        libraryTarget: 'commonjs2'
    },
    module: {
        loaders: [
          {
              test: /\.jsx?/,
              include: MODULES,
              loader: 'babel-loader'
          }
        ]
    },
    plugins: [],
    target: "node"
};

Index.cshtml

<div id="clients" asp-prerender-module="wwwroot/modules/clients"
     asp-prerender-data="@Model" ></div>

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ]
}

packages.json

  "devDependencies": {
    "aspnet-prerendering": "^1.0.7",
    "aspnet-webpack": "^1.0.17",
    "aspnet-webpack-react": "^1.0.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2"
  },
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  }

所以反应组件将驻留在：./wwwroot/modules并且在该文件夹内将驻留clients.jsx和clients.js。

于 2017-02-20T15:03:45.363 回答
0
  1. 安装 angular2-universal-patch： npm install angular2-universal-patch --save
  2. 在“import 'zone.js';”之前添加到您的 boot-server.ts 代码行 但在“导入'angular2-universal-polyfills';”之后：导入'angular2-universal-patch';

示例可以在这里找到：https ://github.com/aspnet/JavaScriptServices/blob/dev/templates/Angular2Spa/ClientApp/boot-server.ts

于 2017-03-24T21:22:26.547 回答