从 Angular 2.0.0 升级到 2.4.0 - 无法读取属性 SelectorMatcher

Question

它是从 this tutorial. It is based on 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)

谁能帮我

重新

我已经遵循了这个 post ()，但它对我不起作用。

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

Answer 1

/*
 * 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.

Answer 2

我假设你正在使用带有 ASP.Net Core 和 webpack 的 Angular2，因为我在 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"
  }

因此 React 组件将驻留在：./wwwroot/modules 并且该文件夹内将驻留 clients.jsx 和 clients.js。

Answer 3

安装angular2-universal-patch: npm install angular2-universal-patch --save
在 "import 'zone.js';" 之前但在 "import 'angular2-universal-polyfills';" 之后添加到您的 boot-server.ts 代码行：导入 'angular2-universal-patch';

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

从 Angular 2.0.0 升级到 2.4.0 - 无法读取属性 SelectorMatcher

Upgrading from Angular 2.0.0 to 2.4.0 - Cannot read property SelectorMatcher

upgrade

webpack

angular2-upgrade

asp.net-core

angular

新建`package.json`-

旧`package.json`-

重新

Rr 重新

从 Angular 2.0.0 升级到 2.4.0 - 无法读取 属性 SelectorMatcher

Upgrading from Angular 2.0.0 to 2.4.0 - Cannot read property SelectorMatcher

upgrade

webpack

angular2-upgrade

asp.net-core

angular

新建package.json-

旧package.json-

重新

Rr 重新

从 Angular 2.0.0 升级到 2.4.0 - 无法读取属性 SelectorMatcher

新建`package.json`-

旧`package.json`-