问题描述
我正在从事 此演示项目.
>它是根据 此内容创建的 教程.它基于 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 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
我假设您将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"
}
因此react组件将驻留在./wwwroot/modules
中,并且在该文件夹中将同时驻留clients.jsx
和clients.js
.
I am working on this demo project.
It is created from this tutorial. It is based on Angular 2.0.0.
I want to upgrade the project to Angular 2.4.
What I have done is this-
New 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"
}
Old 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"
}
So, changelog of package.json
is-
After doing that, I am getting this error-
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)
Can anyone please help me to
Re-
I have followed this post (Upgrading from Angular 2.2.3 to 2.4.0), but it does not work for me.
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
I am supposing you are using Angular2 with ASP.Net Core and webpack because I had this problem when I have using them in angular2 and tried to upgrade.
I have got this error when I have used this 2 things together.
I have a workaround, remove asp-prerender-webpack-config
attribute from tag and configure Webpack to output transpiled file to another file with the same name. Be sure you add libraryTarget: 'commonjs2'
to webpack config file in order to make it work since it required you export your boot function this way: module.exports
. By default webpack doesn't exports anything, you must specify this by yourself. Below the codesnippets required to make it work as it works for me:
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"
}
So the react components will reside in: ./wwwroot/modules
and inside that folder will reside both clients.jsx
and clients.js
.
这篇关于从Angular 2.0.0升级到2.4.0-无法读取属性SelectorMatcher的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!