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

时间：2016-12-30 12:10:55

标签： angular asp.net-core webpack upgrade angular2-upgrade

我正在研究this demo project。

它是从 this 教程创建的。它基于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的更改日志是 -

enter image description here

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

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)

任何人都可以帮助我

重新 -

我已关注此帖（Upgrading from Angular 2.2.3 to 2.4.0），但它对我不起作用。

Rr Re - 

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

3 个答案:

答案 0 :(得分：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。

答案 1 :(得分：1)

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

当我一起使用这2件事时，我遇到了这个错误。

我有一个解决方法，从标记中删除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。

答案 2 :(得分：0)

  1. 安装angular2-universal-patch：npm install angular2-universal-patch --save
  2. 在＆＃34; import＆＃39; zone.js＆＃39;;＆＃34;之前添加到您的boot-server.ts代码行但是＆＃34; import＆＃39; angular2-universal-polyfills＆＃39;＆＃34;：import＆＃39; angular2-universal-patch＆＃39;;

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

相关问题
最新问题